<template>
  <div class="s-upload-img">
    <div class="upload-area">
      <!-- <h2 class="title">
        数据源
        <i class="iconfont iconchushaixuanxiang close" style="margin-left: 200px; cursor: pointer; color: #ccc"
          @click="closeUploadImg"></i>
      </h2> -->
      <div v-if="editImg.isUploadImg" class="upload-img-box">
        <img :src="httpImage + tempUploadImg" alt="临时测试" v-show="!displayUpload" class="bigPhoto" />
        <el-upload ref="upload" :list-type="'picture-card'" action :http-request="uploadImg" v-show="displayUpload"
          accept="image/*" :limit="1" :on-remove="removeImg" :on-success="uploadSuccess" :on-error="uploadError"
          :before-upload="beforeUpload">
          <i ref="uploadIcon" class="el-icon-upload" style="
              color: #3d68e1;
              font-size: 60px;
              position: relative;
              left: 50px;
            "></i>
          <span class="el-upload__text" style="
              font-size: 12px;
              color: #3d68e1;
              position: relative;
              top: 25px;
              left: -30px;
            ">
            <em>点击选择上传图片</em>
          </span>
          <!-- <i class="el-icon-upload" style="color:#3D68E1"></i>
          <div class="el-upload__text" style="font-size:12px;color:#3D68E1">将文件拖到此处，或<em>点击上传</em></div>-->
        </el-upload>
        <!-- <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>-->
      </div>
      <el-image v-else style="width: 100px; height: 100px"
        :src="editImg.imageUrl ? httpImage + editImg.imageUrl : tempImg" fit="fill">
      </el-image>
      <div class="res-img-box" v-if="editImg.resReady" :style="oneLine ? 'height:95px' : 'height:185px'">
        <div class="single-box fl" v-for="(item, index) in editImg.realSmallPath" :key="index">
          <img :src="item ? httpImage + item : tempImg" @click="selected($event, index)" style="max-height: 100%"
            :style="index == clickNum ? 'border:1px solid #FF7733' : ''" />
          <img class="select" v-show="index == clickNum" :src="selectedIcon" alt />
        </div>
        <div class="single-box fl" v-for="(item, index) in unrealSmallPath" :key="index + 't'">
          <img :src="item ? item : tempImg" />
        </div>
      </div>
      <div class="comparison_box">
        <span>对比阈值</span>
        <div class="block">
          <el-slider class="slider" v-model="VideoPhotoData.threshold" input-size="mini"
            @change="thresholdChange"></el-slider>

          <el-input-number size="mini" class="input-number" v-model="VideoPhotoData.threshold" @change="thresholdChange"
            controls-position="right" :min="0" :max="100"></el-input-number>
        </div>
      </div>
      <!-- <el-select v-if="editImg.resReady" v-model="compareTabs" multiple collapse-tags @change="selectChange"
        style="margin: 15px 0; width: 100%" placeholder="请选择">
        <el-option v-for="item in VideoPhotoData.tabsForUploadImg" :key="item.key + 'p'" :label="item.title"
          :disabled="item.disabled" :value="item.key"></el-option>
      </el-select> -->

      <!-- <el-form ref="form" :model="form" label-width="80px">
        <div class="select_library">
          <el-select collapse-tags style="width: 100%;" v-model="tagValues" multiple placeholder="请选择底库">
            <el-option v-for="item in VideoPhotoData.tabs" :key="item.key" :label="item.label" :value="item.title">
            </el-option>
          </el-select>
        </div>
        <div class="search_con">
          <el-input placeholder="请输入内容"  v-model="searchText"></el-input>
        </div>
        <div class="block">
          <el-date-picker size="small" v-model="searchTime" type="datetimerange" start-placeholder="开始日期"
            end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" style="width: 100%; background:#36596F">
          </el-date-picker>
        </div>
        <div>
          <el-select style="width: 100%;" v-model="taskValues" multiple placeholder="请选择场景">
            <el-option v-for="item in VideoPhotoData.tasks" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div>
          <el-input v-model="inputName" :disabled="true" placeholder="请输入姓名"></el-input>
        </div>
        <div>
          <el-select v-model="gender" :disabled="true" style="width: 100%;" placeholder="请选择性别">
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div>
          <el-select v-model="gender" :disabled="true"  style="width: 100%;" placeholder="请选择标签">
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div>
          <el-select v-model="alarmValues" multiple @change="searchingBtn()" :disabled="isDisabled" collapse-tags
            size="mini" style="width: 100%; min-width: 120px" placeholder="请选择事件等级">
            <el-option v-for="item in VideoPhotoData.dictionary.ALARMLEVEL" :key="item.id" :label="item.name"
              :value="item.value"></el-option>
          </el-select>
        </div>
      </el-form> -->
    </div>
    <div class="aside_bottom" v-show="!VideoPhotoData.uploadDiaplay">
      <el-button @click="reUpload">重置</el-button>
      <el-button @click="searchStart">搜索</el-button>
    </div>
  </div>
</template>

<script>
import request from "@/common/untils/request.js";
import getVideoPhoto from "@/components/searching/Pool/VideoPhotoData";
import getCardList from "@/components/searching/Pool/CardList";
export default {
  mixins: [getVideoPhoto, getCardList],
  props: {
    uploadImgs: {
      type: Object,
      default: () => {
        return {
          isUploadImg: true,
          resReady: false,
          realSmallPath: [],
          infomation: {
          },
        }
      }
    }
  },
  watch: {
    "VideoPhotoData.tabsForUploadImg": function () {
      this.selectChange();
    },
    "VideoPhotoData.uploadImg": {
      handler(val) {
        // console.log('val:::', val)
        if (val !== "") {
          this.tempUploadImg = val;
          this.editImg.realSmallPath = [val];
          this.unrealSmallPath = [this.tempImg, this.tempImg];
          this.editImg.resReady = true;
          this.displayUpload = false;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    getResImg() {
      let arr = this.editImg.realSmallPath;
      // let str =
      //   "http://hbimg.b0.upaiyun.com/56ce44d4d6746ef6c88de4d241f76713fc67cf13b05b-ejL0af_fw658";
      // let time = parseInt(Math.random() * 10);
      // for (let i = 0; i < time; i++) {
      //   arr.push(str);
      // }
      if (arr.length <= 3) {
        arr.length = 3;
      } else if (arr.length <= 6) {
        arr.length = 6;
      } else if (arr.length <= 9) {
        arr.length = 9;
      }
      return arr;
    },
  },
  data() {
    return {
      editImg: this.uploadImgs,
      httpImage: "/httpImage/",
      tempUploadImg: "",
      tempImg: require("@/assets/images/search/nobody.png"),
      selectedIcon: require("@/assets/images/search/duihao.png"),
      bigPhoto: [],
      displayUpload: true,
      clickNum: 0,
      picQuality: 60,
      dialogImageUrl: "",
      dialogVisible: false,
      // resReady: false,
      rightSectionDisplay: true,
      value: "",
      compareTabs: ["esData"],
      // realSmallPath: [],
      unrealSmallPath: [],
      oneLine: true,
      multiSelect: false,
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      isUploadImg: true,

      tagValues: [], // 底库
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      searchTime: [this.$moment().format("YYYY-MM-DD 00:00:00"), this.$moment().format("YYYY-MM-DD HH:mm:ss")],
      taskValues: [],
      inputName: "",
      gender: "",
      options1: [
        {
          value: "0",
          label: "男"
        },
        {
          value: "1",
          label: "女"
        },
      ],
      isDisabled: false,
      alarmValues: [],
      tabs: [],
      searchText:"" ,  //请输入内容
      productPagerOptions: {
        currPage: 1,
        pageSize: 10,
        totalCount: 0
      },
    };
  },
  created() {
    this.queryTagList() //底库列表
    this.queryDictionary() // 场景列表
  },
  mounted() {
    console.log(this.VideoPhotoData, "看看是啥666")
    this.selectChange();
    this.$nextTick(() => {
      let scrollContain = this.$refs.rightSection;
      console.log("赋值容器：", scrollContain);
      this.VideoPhotoData.scrollContainDom = scrollContain;
    });
  },
  methods: {
    closeUploadImg() {
      this.VideoPhotoData.uploadDiaplay = false;
      this.clearStatus();
    },
    selectChange() {
      if (!this.compareTabs.includes("esData") && this.compareTabs.length > 0) {
        for (let i = 0; i < this.VideoPhotoData.tabsForUploadImg.length; i++) {
          if (this.VideoPhotoData.tabsForUploadImg[i].title === "抓拍库") {
            this.VideoPhotoData.tabsForUploadImg[i].disabled = true;
          }
        }
        this.$emit("labelDisabled", true);
        return;
      }
      if (this.compareTabs.includes("esData")) {
        for (let i = 0; i < this.VideoPhotoData.tabsForUploadImg.length; i++) {
          if (this.VideoPhotoData.tabsForUploadImg[i].title !== "抓拍库") {
            this.VideoPhotoData.tabsForUploadImg[i].disabled = true;
          }
        }
        this.$emit("labelDisabled", false);
      } else {
        for (let i = 0; i < this.VideoPhotoData.tabsForUploadImg.length; i++) {
          this.VideoPhotoData.tabsForUploadImg[i].disabled = false;
        }
      }
    },
    selected(e, index) {
      this.clickNum = index;
    },
    async uploadImg(param) {
      const fd = new FormData();
      fd.append("file", param.file);
      fd.append("picQuality", this.VideoPhotoData.threshold);
      let res = await request({
        method: "post",
        url: `/data/api-v/dbperson/faceExtract`,
        data: fd,
      });
      this.unrealSmallPath.length = 0;
      console.log("切图返回：", res);
      if (res.success) {
        // <!-- '/httpImage/' -->
        document.querySelector(".el-upload-list").querySelector("img").src =
          this.httpImage + res.data.uploadImage;
        this.editImg.resReady = true;
        this.editImg.realSmallPath = res.data.smImage;
        this.VideoPhotoData.isHaveRealSmallImg =
          res.data.smImage.length > 0 ? true : false;
        if (res.data.smImage.length > 3) {
          this.oneLine = false;
        } else {
          this.oneLine = true;
        }
        if (res.data.smImage.length % 3 !== 0) {
          // 用虚拟人像补全整行
          const length = res.data.smImage.length % 3;
          this.unrealSmallPath.length = 0;
          for (var i = 0; i < 3 - length; i++) {
            this.unrealSmallPath.push(this.tempImg);
          }
        }
      }
    },
    uploadSuccess(resp, file, fileList) {
      this.$notify({
        title: "成功",
        message: "图片上传成功！",
        type: "success",
      });
      this.editImg.resReady = true;
      console.log("文件列表：", file, fileList);
      console.log("上传的文件：", this.bigPhoto);
    },
    beforeUpload() {
      this.$refs.uploadIcon.parentNode.classList.add("s-display");
      console.log("上传之前文件：", this.bigPhoto);
    },
    uploadError(err) {
      this.$notify({
        title: "失败",
        message: err.msg,
        type: "error",
      });
      console.log("上传失败", err);
      this.dialogImageUrl = "";
      this.dialogVisible = false;
      this.$refs.uploadIcon.parentNode.classList.remove("s-display");
    },
    toAdd(item) {
      this.CardList.addBaseList.push(item);
    },
    removeImg() {
      this.editImg.resReady = false;
      this.$refs.uploadIcon.parentNode.classList.remove("s-display");
    },
    reUpload() {
      this.editImg.isUploadImg = true;
      this.displayUpload = true;
      this.editImg.resReady = false;
      this.$refs.upload.clearFiles();
      this.$refs.uploadIcon.parentNode.classList.remove("s-display");

      
      // this.tagValues = []
      // this.taskValues = []
      // this.collection = ""
      // this.alarmValues = []
      // this.VideoPhotoData.queryTabs = []
      // this.VideoPhotoData.queryTasks = []
      // this.VideoPhotoData.queryAlarmlevel = []
      // this.VideoPhotoData.searchTime = this.getDateInit()
      // this.VideoPhotoData.inputValue = ""
      // this.VideoPhotoData.collection = ""
      // this.searchTime = this.getDateInit()
      // this.searchText = ""
      // this.gender = ""
      // this.VideoPhotoData.page = 1
      // if (!this.VideoPhotoData.uploadType) {
      //   // this.VideoPhotoData.querySearchList();
      //   this.setLoadSearch(this.querySearchList())
      // } else {
      //   // this.VideoPhotoData.findPersonByPage();
      //   this.setLoadSearch(this.findPersonByPage())
      // }

      this.$emit("resetChange")
    },
    
    getDateInit() {
      // 要求 默认一个月
      const end = new Date()
      const start = new Date()
      const nowDate = new Date()
      nowDate.setHours(0)
      nowDate.setMinutes(0)
      nowDate.setSeconds(0)
      nowDate.setMilliseconds(0)
      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30)
      end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1)
      // console.log(this.$moment(start).format("YYYY-MM-DD HH:mm:ss"), this.$moment(end).format("YYYY-MM-DD HH:mm:ss"),"日期啊啊")
      return [this.$moment(start).format("YYYY-MM-DD HH:mm:ss"), this.$moment(end).format("YYYY-MM-DD HH:mm:ss")]
    },
    searchStart() {
      if (this.compareTabs.length == 0) {
        this.$notify({
          title: "警告",
          type: "warning",
          message: "您还没有选择要比对的目标库",
        });
        return;
      }
      this.rightSectionDisplay = true;
      this.$emit(
        "searchStart",
        this.displayUpload,
        this.editImg.realSmallPath[this.clickNum],
        this.compareTabs
      );
    },
    thresholdChange(val) {
      this.$emit(
        "thresholdChange",
        val
      );
    },
    getDetails(ev, index) {
      this.CardList.datalist = this.VideoPhotoData.persons;
      let obj = this.CardList.datalist[index];
      this.CardList.details = Array.from(
        new Set([...this.CardList.details, ...[obj]])
      );
      this.VideoPhotoData.activeCard = obj.activeObject.id;
    },
    // 选择底库
    tagChange(e) {
      console.log(e)
    },
    // 搜索
    searchingBtn(val) {
      console.log(val,"kankna val")
      this.VideoPhotoData.queryTabs = this.tagValues
      //处理搜索类型
      var tempArr = this.taskValues.map((task) => task.split(","))
      var tasks = []
      tempArr.forEach((arr) => {
        tasks = tasks.concat(arr)
      })
      this.VideoPhotoData.queryTasks = tasks
      this.VideoPhotoData.page = val ? val : 1
      this.VideoPhotoData.queryAlarmlevel = this.stringToNum()
      this.searchTime = [this.$moment(new Date()).subtract(1, 'months').format('YYYY-MM-DD HH:mm:ss'), this.$moment().format("YYYY-MM-DD HH:mm:ss")]
      this.VideoPhotoData.searchTime = this.searchTime

      this.VideoPhotoData.inputValue = this.searchText
      this.VideoPhotoData.showType = this.showType
      if (!this.VideoPhotoData.uploadType) {
        this.VideoPhotoData.uploadDiaplay = false
        // 列表接口
        this.setLoadSearch(this.querySearchList())
      } else {
        this.setLoadSearch(this.findPersonByPage())
      }

    },
    setLoadSearch(fn) {
      // this.AuthData.setLoading("searchMid", this)
      fn.then((res) => {
        console.log(res, "ress")
        // this.AuthData.closeLoad()
      })
    },
    
    stringToNum() {
      var arr = []
      this.alarmValues.forEach((element) => {
        if (element == "-1") {
          arr.push(-1)
        }
        if (element == "1") {
          arr.push(1)
        }
        if (element == "2") {
          arr.push(2)
        }
        if (element == "3") {
          arr.push(3)
        }
        if (element == "4") {
          arr.push(4)
        }
        if (element == "5") {
          arr.push(5)
        }
      })
      return arr
    },
  },
};
</script>
<style lang="scss">
.s-upload-img {
  width: 100%;
  height: 80%;
  box-sizing: border-box;
  padding: 10px;

  .el-button--info {
    color: #222;
  }

  .upload-area {
    text-align: center;
    // width: 100%;
    height: 100%;
    scrollbar-width: none;
    overflow: hidden;
    box-sizing: border-box;
    //border: 1px solid #ccc;
    // background: #1f465f;
    background: rgba(154, 193, 240, 0.2);
    padding: 5px 15px 15px 15px;
    color: #fff;

    // .el-upload-dragger {
    //   display:none!important
    // }
    .el-form {
      display: flex;
      align-content: space-around;
      justify-content: center;
      flex-wrap: wrap;
      height: 50%;
      color: #ffffff;

      >div {
        width: 100%;
      }
    }

    .el-upload--picture-card {
      width: 250px !important;
      background: #1f465f;
    }

    .el-upload-list--picture-card {
      width: 260px !important;

      .el-upload-list__item {
        width: 260px !important;

        img {
          width: 260px;
          height: 148px;
          object-fit: contain;
        }

        .el-upload__text {
          color: #fff;
        }
      }
    }

    .title {
      text-align: left;
      color: #fff;
    }

    .comparison_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;

      .block {
        width: calc(100% - 70px);
        margin-right: 5px;

        .slider {
          width: 50%;
          float: left;
          margin-right: 5px;
        }

        .input-number {
          width: calc(50% - 5px);
          float: left // padding: 0;
            // padding-left:15px
        }
      }


      span {
        font-size: 12px;
        margin-right: 5px;
      }
    }
  }

  .aside_bottom {
    margin-top: 25px;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;

    .el-button {
      border-radius: 60px;
      opacity: 1;
      color: #01c2ff;
      background: rgba(10, 26, 52, 0.6);
      border: 1px solid rgba(89, 175, 249, 0.7049);
      box-shadow: inset 0px 0px 5px 0.5px rgba(3, 251, 255, 0.6513);
    }
  }

  .res-img-box {
    width: 100%;
    overflow: auto;
    //height: 95px;
    margin-top: 10px;
    text-align: left;

    .single-box {
      //border: 1px solid #ccc;
      width: 33%;
      height: 90px;
      padding: 5px;
      box-sizing: border-box;
      position: relative;
      display: inline-block;
      vertical-align: middle;

      img {
        width: 100%;
        object-fit: contain;
        cursor: pointer;
        border-radius: 3px;
      }

      .select {
        position: absolute;
        width: 20px;
        height: 20px;
        bottom: 5px;
        right: 5px;
      }
    }
  }
}

.s-display {
  display: none !important;
}

.bigPhoto {
  width: 148px;
  height: 148px;
  border-radius: 4px;
}

.el-upload-list__item {
  transition: none !important;
}

.close:hover {
  color: #3d68e1 !important;
}

// ::v-deep {
//   .el-date-editor--datetimerange.el-input__inner {
//     width: 220px !important;
//   }
//   .block{
//     .el-date-editor{
//       width: 220px !important;
//     }

//   }
//   .el-date-editor{
//     width: 100%;
//   }
// }
</style>
